<template>
  <div>

	<!-- <myheader :totalcount="this.totalcount()" :totalprice="this.totalprice()"></myheader> -->
	<myheader></myheader>
	

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<!-- <div>
						<video :src="'http://q690i25l0.bkt.clouddn.com/'+video_key"
								autoplay controls width="500px" height="300px" muted ></video>
					</div> -->

					<div class="product-image mt-3">
						<img class="img-fluid" :src="src" >
					</div>

					<div class="product-thumbnails">
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" :src="src" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" :src="src" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" :src="src" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" :src="src" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" :src="src" ></a>
					</div>
					
					<br>

					<div>
						<!-- <div v-width="500">
							<div class="h-panel">
								<div class="h-panel-bar">
									<span class="h-panel-title">关注用户</span>
									<span class="h-panel-right">总关注数: {{ flow_length }}</span>
								</div>
								<div v-for="(username, index) in goodflow_usernamelist" :key="index">
									<p>{{ username.username }}</p>
								</div>
							</div>
						</div> -->

						<div v-width="500">
								<div class="h-panel">
									<div class="h-panel-bar">
										<span class="h-panel-title">关注用户</span>
										<span class="h-panel-right">总关注数: {{ flownum }}</span>
									</div>
									<div v-for="(username, index) in flownum_list" :key="index">
										<p>{{ username.username }}</p>
									</div>
								</div>
							</div>

					</div>

				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left" >
					<h2 class="mb-3 mt-0">{{ name }}</h2>商品点击量:{{ count_num }}
					<p class="lead mt-2 mb-3 primary-color">${{ price }}</p>
					<h5 class="mt-4">商品简介</h5>
					<p>{{ desc }}</p>

					<p>颜色:{{ color }}</p>
					<p>规格:{{ season }}</p>
					<!-- <p>尺码:{{ size }}</p> -->

					<ul v-for="(tag, index) in tags" :key="index">
						<li>商品标签: {{ tag }}</li>
					</ul>
					
					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>
					
					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					
					<a href="javascript:void(0)" class="btn btn-full-width btn-lg btn-outline-primary" @click="add_cart">添加购物车</a>

					<br><br>

					<Button @click="insertmongo" class="btn btn-full-width btn-lg btn-outline-primary">保存尺码至MongoDB</Button>

					<br><br>

					<Button class="btn btn-full-width btn-lg btn-outline-primary" @click="get_flow_add">关注商品</Button>

					<br><br>

					<Button class="btn btn-full-width btn-lg btn-outline-primary" @click="get_flow_delete">取消关注</Button>
				</div>		
			</div>
		</div>
	</section>
	
	<div class="divider"></div>

	<section class="products text-center">
		<div class="container">
			<h3><a href="#">Goods comments</a></h3>
			<br>

			<textarea v-model="content">  </textarea>

			<br /><br />

			<Button color="blue" @click="comment" >评论</Button>
			<Button color='red' @click="comment_mongo">保存评价至MongoDB</Button>

			<br><br>

			<!-- <ul v-for="(comm, index) in comment_list" :key="index">
				<li>评论序号:  &nbsp;&nbsp;{{ index+1 }}  &nbsp;&nbsp;评论用户id:{{ comm.uid }}  &nbsp;&nbsp;评论信息:{{ comm.content }}  &nbsp;&nbsp;评论商品id:{{ comm.gid }}</li>
				<br>
			</ul> -->

			<div v-width="1200">
				<div class="h-panel">
					<div class="h-panel-bar">
						<span class="h-panel-title">用户评论</span>
						<span class="h-panel-right"><a>More</a></span>
					</div>

					<!-- 普通for循环展示 -->
					<!-- <div class="h-panel-body"  v-for="(comm, index) in comment_list" :key="index"> -->
							
					<!-- <p>评论序号:  &nbsp;&nbsp;{{ index+1 }}  &nbsp;&nbsp;评论用户:{{ comm.uid | myfilter }}  &nbsp;&nbsp;评论信息:{{ comm.content }}  &nbsp;&nbsp;评论商品id:{{ comm.gid }}</p> -->
					<comments :c_list="this.c_list" :myuser='this.myuser'></comments>

					<!-- <div class="h-panel-body"  v-for="(comm, index) in c_list" :key="index"> -->

					<!-- 分页展示 -->

					<!-- <p>评论序号:  &nbsp;&nbsp;{{ index+1 }}  &nbsp;&nbsp;评论用户:{{ comm.uid | myfilter }}  &nbsp;&nbsp;评论信息:{{ comm.content }}  &nbsp;&nbsp;评论商品id:{{ comm.gid }}</p> -->

					<!-- </div> -->

					<!-- 评论分页逻辑 -->

					<div>
						<Pagination v-model="pagination" layout="pager,jumper" @change="change">
	
						</Pagination>
					</div>

				</div>
			</div>
		</div>

	</section>

	<!-- <div v-for="(a_gcl, index) in c_list" :key="index">
			<p>
				评论用户:{{ a_gcl.uid | myfilter }}  &nbsp;&nbsp;评论信息:{{ a_gcl.content }}
			</p>
	</div> -->

	<br><br>


	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>
	
	<myfooter></myfooter>	
    
  </div>
  
</template>


 
<script>
//导包
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

import comments from './comments.vue';
  
import {config,formatXml} from '../config.js'


export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //商品id
	  id:'',
	  name:'',
	  price:'',
	  desc:'',
	  src:'',
	  img:'',
	  video_key:'',
	  color:'',
	  size:'',
	  season:'',

	  tags:[],

	  //商品点击数量参数
	  count_num:'',

		//评论内容
		content:'',

	  //评论列表变量
	  comment_list:[],

	  //评论用户名
	//   c_username:'',

		//用户信息字典
		myuser:{},

		c_list:[],

		//分页器变量
		pagination:{
			page:1,
			size:5,
			total:30,

		},

		flow_length:'',

		//商品关注用户名列表
		goodflow_usernamelist:[],

		//
		flownum:'',
		flownum_list:[],

		//购物车变量
		cart_list:[],

    }
  },

  //注册组件标签
	components:{
		'myheader': myheader,
		'myfooter': myfooter,
		comments,

  },
  
  mounted:function(){
	window.that = this;
	//接收商品id
	var id = this.$route.query.id;
	this.id = id; 

	//获取商品详情信息
	this.get_data()
   
   	//调用函数
   	this.get_mongo()

	//获取商品点击量
	this.num()

	//商品评论实时获取
	this.commentlist()

	//评论用户id获取
	// this.gcuname()

	//调用用户列表
	this.get_user()

	//
	//请求评论接口
	this.axios.get('http://localhost:8000/gclist',{params:{page:1,size:5}}).then((result)=>{
		console.log(result)
		this.c_list = result.data.comment_data;
		this.pagination.totla = result.data.comment_total;
	})

	//商品关注用户的用户名称
	// this.goodflow_username()

	//获取关注数量
	this.get_flownum()

	//初始化购物车
	this.init_cartlist()
},

  //自定义过滤器
  filters:{
	  //自定义方法
	myfilter:function(value){

		//通过key(用户id)取用户名
		return window.that.myuser[value];

}

  },

  methods:{

	insertmongo:function(){

		// this.axios.get(config['after_end'] + '/tagmongo/',{params:{id:this.$route.query.id,
		// tags:this.tags}})
		// .then((result)=>{
		// 	this.tags = [this.color,this.size];
		// 	// console.log(this.color)
		// 	// console.log(this.size)
		// 	this.tags = JSON.stringify(this.tags)
		// 	console.log(this.tags);
		// 	// console.log(tag_list);

		// })

		this.axios.get(config['after_end'] + '/tagmongo/',{params:{id:this.$route.query.id,
		color:this.color,size:this.size}})
		.then((result)=>{
			console.log(result);

			// this.$Message(result.data.message);


		})

	},

	get_data:function(){
		//获取商品详情信息
		this.axios.get(config['after_end'] + '/goodsitem/',{params:{id:this.$route.query.id}}).then((result)=>{
			//打印接口返回值
			console.log(result)
				
			//向用户提醒后端制定的message
			// this.$Message(result.data.message)
			//给列表赋值
			this.name = result.data.data.name;
			this.price = result.data.data.price;
			this.desc = result.data.data.desc;
			this.src = 'http://localhost:8000/static/upload/' + result.data.data.img;
			this.img = result.data.data.img;
			// this.video_key = result.data.data.video;

			var parms = result.data.data.parms;

			//进行转换
			parms = JSON.parse(parms)	

			this.color = parms.color;
			this.size = parms.size;
			this.season = parms.season;

			// console.log(parms);	


  
			})
		
	},

	get_mongo:function(){
		this.axios.get(config['after_end'] + '/gettags/',{params:{id:this.$route.query.id,}})
		.then((result)=>{
			console.log(result);

			this.tags = result.data.tags
			// console.log(this.tags)

			// this.$Message(result.data.message);


		})

	},
	
	//封装获取商品点击量函数
	num:function(){
		this.axios.get(config['after_end'] + '/getnum/')
		.then((result)=>{
			// alert(result.data.num);
			// alert(result.data.count);
			// alert(result.data.count_list);
			this.count_num = result.data.count;
		})

	},

	// //评论方法
	comment:function(){
		if(this.content == ""){
			this.$Message("评论内容不能为空"); 
			return false;
			}

		// 发送请求
		this.axios.post('http://localhost:8000/insertcomment/',this.qs.stringify({content:this.content,uid:localStorage.getItem("uid"),gid:this.id})).then((result) =>{

			// console.log(result); 
			if(result.data.code == 403){
				this.$Message(result.data.message);

			}
			if(result.data.code == 200){
				this.$Message(result.data.message);

				//将评论内容和作者实时填充到评论容器中
				this.comment_list.unshift({'uid':localStorage.getItem('uid'),"content":this.content}) 

				this.content = ''; 

				//评论完成后自动刷新
				// this.$router.go(0);

				}         

		});

	},

	//评价展示
	commentlist:function(){

		//发送请求
		this.axios.get(config['after_end'] + '/commentlist/',{params:{id:this.$route.query.id,gid:this.id}}).then((result) =>{
			// console.log(result); 
			this.comment_list = result.data;
			this.a_gcl = result.data;

		});

	},

	//评论存储至MongoDB
	comment_mongo:function(){
		if(this.content == ""){
			this.$Message("评论内容不能为空"); 
			return false;
			}

		// 发送请求
		this.axios.post('http://localhost:8000/commentmongo/',this.qs.stringify({content:this.content,uid:localStorage.getItem("uid"),gid:this.id})).then((result) =>{

			// console.log(result); 
			if(result.data.code == 200){
				this.$Message(result.data.message);
				this.content = ''; 

				//评论完成后自动刷新
				this.$router.go(0);

				}         

		});

	},

	//获取用户名
	get_user:function(){
		this.axios.get('http://localhost:8000/userlist/',{params:{id:this.id}}).then((result)=>{

			// console.log(result);

			//动态赋值
			for(let i=0, l=result.data.length; i<l; i++){
				this.myuser[result.data[i].id] = result.data[i].username;
				// console.log(this.myuser);
			}

			// console.log(this.myuser);

		})
	},

	//分页器点击事件
	change:function(){
		this.axios.get('http://localhost:8000/gclist/',{params:{page:this.pagination.page,size:this.pagination.size,total:this.pagination.total}}).then((result)=>{
			this.c_list = result.data.comment_data;

		});

	},

	//关注用户及数量获取接口
	goodflow_username:function(){

		//发送请求
		this.axios.get(config['after_end'] + '/goodflow_username/',{params:{gid:this.id}}).then((result) =>{
			// console.log(result);
			this.goodflow_usernamelist = result.data;
			// console.log(result.data);
			this.flow_length = this.goodflow_usernamelist.length;

		});

	},

	//获取数量及用户名
	get_flownum:function(){
		this.axios.get(config['after_end'] + '/flownum/',{params:{gid:this.id}}).then((result)=>{
			// this.$Message(result.data.message);
			console.log(result);
			this.flownum = result.data[1]['flow'];
			// console.log(this.flownum) 
			this.flownum_list = result.data;

		})

	},

	//添加关注
	get_flow_add:function(){
		this.axios.get(config['after_end'] + '/getflow/',{params:{id:this.id,uid:localStorage.getItem("uid"),type:1}}).then((result)=>{
			this.$Message(result.data.message);
			// console.log(result);
			var uid = localStorage.getItem('uid')
			var s_uid = "" + uid

			if(result.data.message == "关注成功"){
				//将用户名实时填充到容器中
				this.flownum_list.unshift({'username':this.myuser[s_uid],'flow':this.flownum+1})
				// this.flownum_list.unshift({'username':'aaa','flow':this.flownum})
				// console.log(this.flownum_list)
				this.flownum = this.flownum+1

			}
			
		})

	},

	//取消关注
	get_flow_delete:function(){
		this.axios.get(config['after_end'] + '/getflow/',{params:{id:this.id,uid:localStorage.getItem("uid"),type:0}}).then((result)=>{
			this.$Message(result.data.message);

			this.$router.go(0);

			
		})


	},


	//加入购物车逻辑
	add_cart:function(){
		var find = 0;
		// console.log(this.id);
		// console.log(this.name);
		// console.log(this.price);
		for(var i=0,l=this.cart_list.length;i<l;i++){			
			//如果找到了
			if(this.id == this.cart_list[i]['id']){
				//将该商品的数量加一
				this.cart_list[i]["num"]++; 
				find=1;
				//结束循环
				break;

			}

		}
		//如果没找到
		if(find==0){
			//将该商品加入购物车列表
			this.cart_list.push({"name":this.name,"id":this.id,"price":this.price,"num":1,"img":this.img})
		}

		console.log(this.cart_list);

		//存入localStorage
		localStorage.setItem("cart",JSON.stringify(this.cart_list));
	},


	//初始化购物车逻辑
	init_cartlist:function(){
		//将localStorage数据赋值给cart_list
		var cart = localStorage.getItem('cart');
		if(cart){
			this.cart_list = JSON.parse(localStorage.getItem("cart"));

		}
		

	},


	//计算购物车内商品总数
	totalcount:function(){
		var total = 0;
		for(var i=0,l=this.cart_list.length;i<l;i++){
			//获得总数量
			total += this.cart_list[i].num;
			
		}

		//返回总数量
		return total;

	},

	//计算商品总价格
	totalprice:function(){
		var total = 0;
		for(var i=0,l=this.cart_list.length;i<l;i++){
			//获得总数量
			total += (this.cart_list[i].num * this.cart_list[i].price);
			
		}

		//返回总数量
		return total;

	},


  }

}


</script>
 
<style>



</style>